<template>
  <div
    class="submission-card"
    :class="{
      'selected': isSelected,
      'status-graded': submission.status === 'graded',
      'status-pending': submission.status === 'pending',
      'status-reviewed': submission.status === 'reviewed'
    }"
    @click="$emit('card-click', submission)"
  >
    <div class="submission-header">
      <div class="student-info">
        <div class="student-avatar" :style="{ backgroundColor: avatarColor }">
          {{ studentInitials }}
        </div>
        <div class="student-details">
          <h4>{{ submission.userId }}</h4>
          <p class="student-id">学号: {{ submission.studentId }}</p>
        </div>
      </div>
      <div class="submission-status-badge">
        <StatusBadge :status="submission.status" />
      </div>
    </div>

    <div class="submission-body">
      <div class="info-item">
        <i class="fas fa-clock"></i>
        <span>提交: {{ formattedSubmitTime }}</span>
      </div>
      <div class="info-item">
        <i class="fas fa-hourglass-half"></i>
        <span>用时: {{ formattedDuration }}</span>
      </div>
      <div class="info-item">
        <i class="fas fa-chart-line"></i>
        <span>得分: <span class="score">{{ submission.score ?? '未批改' }}</span>/{{ submission.totalScore }}</span>
      </div>
    </div>

    <div class="submission-actions">
      <button
        @click.stop="$emit('start-grading', submission)"
        class="btn btn-sm btn-primary"
      >
        <i class="fas fa-edit"></i>
        {{ submission.status === 'graded' || submission.status === 'reviewed' ? '重新批改' : '开始批改' }}
      </button>
      <label class="checkbox-container" @click.stop title="选择用于批量操作">
        <input
          type="checkbox"
          :checked="isSelected"
          @change="$emit('toggle-selection', submission.id)"
        />
        <span class="checkmark"></span>
      </label>
    </div>
  </div>
</template>

<script setup>
// ... (script remains the same)
import { computed } from 'vue';
import StatusBadge from './StatusBadge.vue';
import { formatDate, formatDuration, getAvatarColor as getAvatarColorUtil, getStudentInitials as getStudentInitialsUtil } from '../utils';

const props = defineProps({
  submission: {
    type: Object,
    required: true
  },
  isSelected: {
    type: Boolean,
    default: false
  }
});

defineEmits(['toggle-selection', 'start-grading', 'card-click']);

const formattedSubmitTime = computed(() => formatDate(props.submission.submitTime));
const formattedDuration = computed(() => formatDuration(props.submission.duration));
const avatarColor = computed(() => getAvatarColorUtil(props.submission.userId));
const studentInitials = computed(() => getStudentInitialsUtil(props.submission.userId));
</script>

<style scoped>
.submission-card {
  background-color: #fff; /* var(--card-background-color) */
  border: 1px solid #dee2e6; /* var(--border-color) */
  border-radius: 0.3rem; /* var(--border-radius) */
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); /* var(--box-shadow) */
  transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
  cursor: pointer;
}

.submission-card:hover {
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
}

.submission-card.selected {
  border-left: 5px solid #007bff; /* var(--primary-color) */
  box-shadow: 0 0.25rem 0.75rem rgba(0, 123, 255, 0.15);
}
/* Optional: different border colors for status */
.submission-card.status-graded { border-top: 3px solid #28a745; /* var(--success-color) */ }
.submission-card.status-pending { border-top: 3px solid #ffc107; /* var(--warning-color) */ }
.submission-card.status-reviewed { border-top: 3px solid #17a2b8; /* var(--info-color) */ }


.submission-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* Align badge to top right of student info */
  margin-bottom: 0.75rem;
}

.student-info {
  display: flex;
  align-items: center;
}

.student-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
  margin-right: 0.75rem;
}

.student-details h4 {
  margin: 0 0 0.1rem 0;
  font-size: 1.1rem;
  color: #343a40; /* var(--dark-color) */
}

.student-details .student-id {
  margin: 0;
  font-size: 0.8rem;
  color: #6c757d; /* var(--text-muted-color) */
}

.submission-status-badge {
 margin-left: auto; /* Pushes badge to the right */
}

.submission-body {
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.info-item {
  display: flex;
  align-items: center;
  color: #495057; /* var(--text-color) with a bit less intensity */
  margin-bottom: 0.3rem;
}

.info-item i {
  margin-right: 0.5rem;
  color: #6c757d; /* var(--text-muted-color) */
  width: 16px; /* Ensure icons align well */
  text-align: center;
}
.info-item .score {
  font-weight: bold;
  color: #007bff; /* var(--primary-color) */
}


.submission-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e9ecef;
  padding-top: 0.75rem;
}

/* Basic button styling (assuming global .btn styles exist) */
.btn {
  display: inline-flex; /* Helps align icon and text */
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.2rem; /* var(--border-radius) */
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}
.btn-primary {
  color: #fff;
  background-color: #007bff; /* var(--primary-color) */
  border-color: #007bff; /* var(--primary-color) */
}
.btn-primary:hover {
  background-color: #0056b3;
  border-color: #0056b3;
}
.btn-primary i {
  margin-right: 0.3rem;
}


/* Custom Checkbox */
.checkbox-container {
  display: block;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  font-size: 0.9rem;
  user-select: none;
}

.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.checkbox-container:hover input ~ .checkmark {
  background-color: #ddd;
}

.checkbox-container input:checked ~ .checkmark {
  background-color: #007bff; /* var(--primary-color) */
  border-color: #007bff; /* var(--primary-color) */
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

.checkbox-container .checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
</style>
